<template>
  <div class="min-h-screen bg-gray-50 font-sans flex">
    <!-- Side Navigation -->
    <aside :class="['bg-white shadow-sm transition-all duration-300', 'w-60']">
      <el-menu
          :default-active="activeMenu"
          class="h-[calc(100vh-4rem)]"
          @select="handleSelect"
      >
        <el-menu-item index="/empinfo">
          <el-icon><HomeFilled /></el-icon>
          <template #title>养老易</template>
        </el-menu-item>

        <el-sub-menu index="info">
          <template #title>
            <el-icon><User /></el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/empholiday">请假申请</el-menu-item>
          <el-menu-item index="/empsalary">工资明细</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </aside>
    <div class=" flex-1 flex flex-col overflow-hidden">
      <!-- Top Navigation -->
      <header  ref="header" class="bg-white shadow-sm">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <h1 class="text-xl font-semibold text-gray-800">养老易</h1>
          </div>
          <div class="flex items-center space-x-6">
            <div class="text-gray-600">
              <span>{{ currentDate }}</span>
              <span class="ml-2">{{ currentTime }}</span>
            </div>
            <el-dropdown>
              <button class="flex items-center space-x-1">
                <i class="el-icon-user text-gray-600 text-xl"></i>
                <span class="text-sm text-gray-600">工作台</span>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <i class="el-icon-user mr-2"></i>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-lock mr-2"></i>
                    <span @click="switchAccounts">切换账号</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <i class="el-icon-switch-button mr-2"></i>
                    <span  @click="logout">退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </header>
      <RouterView />
    </div>
  </div>
</template>
<script setup>
import { RouterView, RouterLink } from 'vue-router';
import router from '../../router';
import {onMounted, ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, UserFilled, HomeFilled, User,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useTokenStore } from '@/stores/token';
const tokenStore = useTokenStore();
const activeMenu = ref('/');
// 当前时间
const currentTime = ref('');
const currentDate = ref('');

// 更新当前时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false });
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  });
};

const handleSelect = (key, keyPath) => {
  router.push(key);
}
const logout = () => {
  ElMessage.success({
    message: "退出成功",
    duration: 1200,
    onClose: () => {
      router.push('/login')
      tokenStore.$reset()
    }
  })
}
const switchAccounts = () => {
  ElMessage.success({
    message: "切换账号",
    duration: 1200,
    onClose: () => {
      router.push('/login')
      tokenStore.$reset()
    }
  })
};
// 初始化时间
onMounted(() => {
  updateTime();
  setInterval(updateTime, 1000);
});
</script>


<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 280px;
  min-height: 400px;
}
</style>